<!-- 
  模板部分：
  使用Vue的文本插值语法 {{ }} 展示message的值
  当message的响应式值发生变化时，模板会自动更新显示最新内容
-->
<template>
    {{ message }}
</template>

<!-- 
  脚本部分：
  <script setup> 是Vue 3的语法糖，用于简化组件逻辑编写
  在此模式下，变量和函数无需显式导出即可在模板中使用
-->
<script setup>
// 从Vue中导入ref函数
// ref是Vue 3提供的响应式API，用于创建基本类型的响应式数据
import { ref } from 'vue'

// 使用ref创建响应式变量message并初始化
// ref会将基本类型数据包装成一个响应式对象，通过.value属性访问和修改其值
const message = ref('不积跬步无以至千里')

// 设置一个2秒后执行的定时器，用于演示响应式数据更新
setTimeout(() => {
    // 修改响应式变量的值
    // 注意：通过ref创建的响应式变量，必须通过.value属性进行修改
    // 这样Vue才能追踪到数据变化并触发视图更新
    message.value = '长风破浪会有时，直挂云帆济沧海'
}, 2000); // 延迟时间：2000毫秒（2秒）
</script>